import { Forward } from "@/api/interface/iot";
import { addRule, delRule, getRuleList } from "@/api/modules/forward/forwardRule";
import Empty from "@/components/Empty";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import OnlineStatus from "@/components/Sansan/Status/OnlineStatus";
import { MessageType } from "@/enums/messageEnum";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { dataFormat } from "@/utils/format";
import { confirm, showMsg, showTips } from "@/utils/util";
import BasicDialog from "./components/pluginDialog";
export default defineComponent({
	setup() {
		const initParam = reactive<Forward.ReqRule>({});

		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};

		const getTableList = async (params: any) => {
			return getRuleList(params);
		};
		const btnList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			btnList.value = await useAuthButtons();
		});
		const detailDialog = reactive<any>({
			detail: {},
			title: "添加转发服务",
			visible: false
		});
		const clickBtn = async (fn: string, row: any) => {
			let selected = row.selectList || [row];
			switch (fn) {
				case "details":
					if (selected.length != 1) {
						showMsg("请选择一条记录", MessageType.warning);
						return;
					}
					detailDialog.detail = { ...selected[0] };
					detailDialog.visible = true;
					break;
				case "add":
					detailDialog.detail = {};
					detailDialog.visible = true;
					break;
				case "del":
					if (!selected.length) {
						showMsg("请选择要删除的选择的记录", MessageType.warning);
						return;
					}
					confirm({ content: "删除后无法找回，确定删除当前选择的记录？" }).then(flag => {
						flag && submitDel({ id: selected.map((item: any) => item.id).join(",") });
					});
					break;
			}
		};

		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "name", label: "插件名称" },
			{ prop: "productCode", label: "更新时间", search: { el: "input" } },
			{ prop: "deptId", label: "功能介绍" },
			{ prop: "operation", label: "操作", fixed: "right", width: 130 }
		];

		const proTable = ref<any>();
		const detail = reactive<any>({});
		const submitDel = async (dataInfo: any) => {
			let res = await delRule({ ...dataInfo });
			let ok = showTips(res.code, "删除", res.message);
			if (ok) {
				proTable.value.clearSelection();
				proTable.value.reset();
			}
		};
		const submitAdd = async () => {
			let res = await addRule({ ...detail });
			let ok = showTips(res.code, "添加", res.message);
			if (ok) {
				detailDialog.visible = false;
				proTable.value.getTableList();
			}
		};
		return () => {
			return (
				<div>
					<BasicDialog
						width="750px"
						title={detailDialog.title}
						v-model:visible={detailDialog.visible}
						detail={detailDialog.detail}
						onSubmit={() => {
							submitAdd();
						}}
					></BasicDialog>
					<ProTable
						ref={proTable}
						title={btnList.value.length ? "" : "列表管理"}
						columns={columns}
						requestApi={getTableList}
						initParam={initParam}
						dataCallback={dataCallback}
					>
						{{
							tableHeader: (scope: any) => {
								return btnList.value?.map((item: any) => {
									return (
										<el-button onClick={() => clickBtn(item.path, scope)} type={item.btnClass}>
											<i class={`iconfont ${item.icon}`}></i>
											{item.menuName}
										</el-button>
									);
								});
							},
							createTime: (scope: any) => {
								return dataFormat("datetime", scope.row.createTime);
							},
							onlineStatus: (scope: any) => {
								return <OnlineStatus v-model={scope.row.onlineStatus} onlineLabel="运行中" offlineLabel="未启动" />;
							},
							operation: (scope: any) => {
								return (
									<>
										<el-link
											type="primary"
											link
											class="iconfont iconbx-file"
											onClick={() => {
												clickBtn("details", scope.row);
											}}
										>
											详情
										</el-link>
									</>
								);
							},
							empty: () => {
								return <Empty btnText="添加转发插件" onAdd={() => clickBtn("add", {})} />;
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
